import React, { Component } from 'react';
import { Button, Form, Input, Radio, Space } from "antd";
import TheUpload from "../../../../components/TheUpload";
import TheQuill from "../../../../components/TheQuill";

class Editor extends Component {
    state = {
        fileList: null,
        radioValue: ''
    }

    componentDidMount() {
        if (this.props.data) {
            this.formRef.setFieldsValue(this.props.data)
            const fileList = [
                {
                    uid: '-1',
                    name: 'image.png',
                    status: 'done',
                    url: this.props.data.bannerImage,
                },
            ]
            this.setState({
                fileList,
                // radioValue: this.props.data.configCarouselType,
                // configCarouselContent: this.props.data.configCarouselContent || ' '
            })
        }
    }

    /**
     * @desc 设置新闻内容表单默认值
     * */
    // setNewsContent = (data) => {
    //     this.setState({
    //         configCarouselContent: data
    //     })
    //     this.formRef.setFieldsValue({ configCarouselContent: data })
    // }
    /**
     * @desc 获取图片Id插入到form表单中
     * @param data
     */
    getFileResult = data => {
        if (data && data.length > 0) {
            let str = data.map(v => {
                if (v.response && v.response.code === 0) {
                    return v.response.data
                } else {
                    return ''
                }
            }).join(',')
            this.formRef.setFieldsValue({ bannerImage: str })
        } else {
            this.formRef.setFieldsValue({ bannerImage: '' })
        }
    }
    radioChange = e => {
        this.setState({
            radioValue: e.target.value
        })
    }
    onFinish = value => {
        value.configCarouselContent = value.configCarouselContent.trim()
        this.props.onFinish(value)
    }

    render() {
        const { btnLoading, dialogCancel, data } = this.props
        // const { radioValue } = this.state
        return (
            <Form
                ref={(ref) => {
                    this.formRef = ref;
                }}
                onFinish={this.onFinish}
            >
                <Form.Item rules={[{ required: true, message: '请输入标题' }]} name={'bannerName'} label={'标题'}>
                    <Input maxLength={20} />
                </Form.Item>
                <Form.Item rules={[{ required: true, message: '请选择图片' }]} name={'bannerImage'} label={'图片'}>
                    {data && this.state.fileList && this.state.fileList.length &&
                        <TheUpload fileList={this.state.fileList} maxSize={10} data={{ attachKey: '1' }} len={1}
                            getFileResult={this.getFileResult} />}
                    {
                        !data && <TheUpload data={{ attachKey: '1' }} maxSize={10} len={1}
                            getFileResult={this.getFileResult} />
                    }
                </Form.Item>
                <Form.Item rules={[{ required: true, message: '请输入位置排序' }, {
                    pattern: /^[0-9]*$/,
                    message: '只能输入数字'
                }]} name={'bannerSort'} label={'位置排序'}>
                    <Input maxLength={5} />
                </Form.Item>
                <Form.Item rules={[{ required: true, message: '请输入地址链接' }]} name={'bannerUrl'}
                    label={'地址链接'}>
                    <Input />
                </Form.Item>
                {/* <Form.Item rules={[{ required: true, message: '请选择外链或图文' }]} name={'configCarouselType'} label={'外链或图文'}>
                    <Radio.Group onChange={this.radioChange} value={radioValue}>
                        <Radio value={'1'}>地址链接</Radio>
                        <Radio value={'2'}>富文本图文</Radio>
                    </Radio.Group>
                </Form.Item> */}
                {/* {
                    radioValue === '1' &&
                    <Form.Item rules={[{ required: true, message: '请输入地址链接' }]} name={'configCarouselUri'}
                        label={'地址链接'}>
                        <Input />
                    </Form.Item>
                }
                {
                    radioValue === '2' &&
                    <Form.Item rules={[{ required: true, message: '请输入详情' }]} name={'configCarouselContent'}
                        label={'详情'}>
                        <TheQuill defaultValue={data && data.configCarouselContent}
                            setNewsContent={this.setNewsContent} />
                    </Form.Item>
                } */}
                <div className="p-text-align">
                    <Space size="large">
                        <Button key="back" onClick={dialogCancel}>
                            取 消
                        </Button>
                        <Button type="primary" loading={btnLoading} htmlType="primary">
                            确 定
                        </Button>
                    </Space>
                </div>
            </Form>
        );
    }
}

export default Editor;